import Vue from 'vue'
import './filter.js'
//由于用到mint-ui中的header，按需导入
// import {Header, Swipe, SwipeItem,Button, Lazyload} from 'mint-ui'
// Vue.component(Header.name, Header);//使用Vue.component注册组件，Header.name是官方帮我们定义好的名字,在页面中直接引用mt-header标签
// // console.log(Header.name)===mt-header
// //注册轮播图
// Vue.component(Swipe.name, Swipe);
// Vue.component(SwipeItem.name, SwipeItem);
// Vue.component(Button.name, Button);
// Vue.use(Lazyload); //图片懒加载通过按需导入的方式不能完美的实现，必须全局导入

//全局导入'mint-ui'
import MintUI from 'mint-ui'
Vue.use(MintUI)
import 'mint-ui/lib/style.css'
//注册缩略图
import VuePreview from 'vue-preview'
Vue.use(VuePreview)
//倒入mui样式
import './lib/mui/css/mui.min.css'
//购物车是扩展图标，要引入对应的样式和font文件
import './lib/mui/css/icons-extra.css'
//购物车功能通过vuex来传递数据
import Vuex from 'vuex'
Vue.use(Vuex)
var persistcar=JSON.parse(localStorage.getItem('car')||'[]')//页面一上来先获取到数据赋给car
var store=new Vuex.Store({
  state:{
    //存放公共的数据
    //分析点击加入购物车的时候需要传入，当前购买商品的id，购买的数量，商品的销售价格，自定义默认打开购买的属性，可以把这些数据组织到一个对象里
    // carobj={//用户点击加入购物车的时候需要传入的东西
		// 	id:this.id,//当前商品id
		// 	count:this.val,//当前商品用户想购买的数量
		// 	price:this.info.sell_price,//当前商品的销售价格
		// 	selected:true//既然用户点击了加入购物车就表示想买所以默认是选中状态
		// }
    car:persistcar//做数据持久化这里不能定义成一个空数组，
  },
    mutations:{
      //定义操作state中数据的方法
      //当car中有一模一样的商品信息的时候只需要让count的值增加就行了
      //如果没有的话直接把carobj，push到car中
      addtoshoppcar(state,carobj){//mutations中的方法的第一个参数默认都是state
        var flag=false
        state.car.some(item=>{
          if(item.id==carobj.id){
            item.count+=parseInt(carobj.count)//这里是同一件商品用户想要购买的多少，之前的数量加上现在点击了加入购物车时选择的数量
            flag=true
            return true//找到就结束当前循环
          }
        })
        //循环执行完都没有找到相同的商品那么
        if(!flag){
          state.car.push(carobj)
        }
        //在mutations中的方法里面操作形参state里的数据会直接同步到vuex实例的state
        //做购物车数据持久化,每次操作完state.car放入localStorage中
        localStorage.setItem('car',JSON.stringify(state.car))
      },
      updatecarcount(state,idandcount){
        //这里的形参state，操作它就相当于是操作store下的state
        state.car.some(item=>{
          if(item.id==idandcount.id){
            item.count=idandcount.count//这里表示store下的state里的数据发生了变化，那么就会调用
            return true
          }
        })
        localStorage.setItem('car',JSON.stringify(state.car))//把操作完的数据同步到localStorage中（保证刷新页面的时候每次获取到的都是最新的数据）    
      },
      removeitem(state,id){
        state.car.some((item,i)=>{
          if(item.id==id){
            state.car.splice(i,1)
          }
        })
        localStorage.setItem('car',JSON.stringify(state.car))//处理完store中的state上的数据还要同步到localstorage中
      },
      updateSelected(state,selectobj){
        state.car.some(item=>{
          if(item.id==selectobj.id){
            item.selected=selectobj.selected
            return true
          }
        })
        localStorage.setItem('car',JSON.stringify(state.car))
      }
    },
    getters:{
//用来包装store中的state中的数据,只要store中的state中的数据发生变化就会调用getters里面所有的方法
  shoppcarnumber(state){//当作计算属性来使用,方法内部的数据变化就会被调用
        var c=0
        state.car.forEach(item=>{
          c+=item.count
        })
        return c
      },
      getcarcount(state){
        var o={}
        state.car.forEach(item=>{
          o[item.id]=item.count//把购物车中的商品id和该商品用户想买的件数形成对应关系放入一个对象里
        })
        return o
      },
      selectedorno(state){
        var o={}
        state.car.forEach(item=>{
          o[item.id]=item.selected//涉及到对应关系的时候进行对象里面键值对的配置
        })
        return o        
      },
      gettotalcommodityprice(state){
        //勾选的商品和总价的变化受到，删除，加减数量，开关的打开关闭这些因素的影响，但是删除，加减数量，开关的打开关闭操作的都是state中car上的数据
        //所以我们直接关心数据的变化来操作数据就行
        //分析问题
        //1 勾选的商品怎么来就是购物车页面上所有按钮选中项对应的对象中的count的总和
        //2 总价怎么来的就是购物车页面上所有按钮选中项对应的对象中的数量乘单价的总和
        var o={
          selectedcount:0,//勾选的商品，每次数据改变调用方法的时候都赋值为0
          total:0//总价
        }
        state.car.forEach(item=>{
          if(item.selected){
            o.selectedcount+=item.count//每次数据改变调用方法的时候对象o里的两个属性都是要重新计算的
            o.total+=item.price*item.count
          }
        })
        return o
      }
    }
})
//导入vue-resource并安装用来发送ajax
import vueResource from 'vue-resource'
Vue.use(vueResource)
//全局配置请求根路径的必须写在vueResource之后
Vue.http.options.root = 'http://vue.studyit.io';
//全局配置post提交时的表单数据类型application/x-www-form-urlencoded（第三个参数）
Vue.http.options.emulateJSON = true;
//导入路由相关的包
import vueRouter from 'vue-router'
//安装路由
Vue.use(vueRouter)
//导入根组件模板对象
import app from './App.vue'
import router from './router.js'
var vm=new Vue({
  el:'#app',
  render:c=>c(app),//把根组件渲染到vue控制区域
  router,//挂载路由对象
  store
})